<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Signin Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">
    <title>用户注册</title>
    <style>
        body{
            align:center;
        }
        table{
            width:800px;
            height:auto;

        }
        .td-left{
            width:100px;
        }
        .text{
            width:200px;
            height:18px;
        }
        /* 按钮美化 */
        .button {
            width: 270px;
            height: 40px;
            border-width: 0px;
            border-radius: 15px;
            background:#FF6699;
            cursor: pointer;
            outline: none;
            font-family: 微软雅黑;
            color: white;
            font-size: 17px;
        }
        /* 鼠标移入按钮范围时改变颜色 */
        .button:hover {
            background: #FF6677;
        }
        #passStrength{
            height:6px;width:120px;border:1px solid #ccc;padding:2px;
        }
        .strengthLv1{
            background:red;height:6px;width:40px;
        }
        .strengthLv2{
            background:orange;height:6px;width:80px;
        }
        .strengthLv3{
            background:green;height:6px;width:120px;
        }.code {
             font-family:Arial;
             font-style:italic;
             color:white;
             font-size:30px;
             border:0;
             padding:2px 3px;
             letter-spacing:3px;
             font-weight:bolder;
             float:left;
             cursor:pointer;
             width:150px;
             height:50px;
             line-height:60px;
             text-align:center;
             vertical-align:middle;
             background-color:#FF6699;
         }
        span {
            text-decoration:none;
            font-size:12px;
            color:#6699FF;
            padding-left:10px;
        }

        span:hover {
            text-decoration:underline;
            cursor:pointer;
        }
        #passStrength{
            height:6px;width:120px;border:1px solid #ccc;padding:2px;
        }
    </style>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"/>
    <script type="text/javascript">
        /*添加事件监听兼容问题(为了机房中的IE浏览器做准备)处理*/
        EventListener={
            addEvent:function(ele,eve,fun){
                if(ele.addEventListener){
                    ele.addEventListener(eve,fun);
                }else if(ele.attachEvent){
                    ele.attachEvent("on"+eve,fun);
                }else{
                    ele["on"+eve]=fun;
                }
            }
        }
        window.onload=function(){
            var inputName=document.getElementsByTagName("input");
            var btnName=document.getElementsByClassName("button");
            var tdLeft=document.getElementsByClassName("td-left");
            /*重置按钮之后不再显示提示内容*/
            EventListener.addEvent(btnName[1],"click",function(){
                window.location.reload();
            })
            /*去除文本框内数据的所有空格(包含字符串中间的)*/
            function delSpace(obj){
                obj+="";
                obj=obj.replace(/\s/g,"");
                return obj;
            }
            /*获取select的选项值(调的是select下option的innerHTML)*/
            function selectOption(obj){
                var value="";
                for(var i=0;i<obj.length;i++){
                    if(obj[i].selected==true){
                        value=obj[i].innerHTML;
                    }
                }
                return value;
            }

            function selector(what){
                if(what.charAt(0)=="."){
                    return document.getElementsByClassName(what.slice(1));
                }else if(what.charAt(0)=="#"){
                    return document.getElementById(what.slice(1));
                }else{
                    return document.getElementsByTagName(what);
                }
            }
        }
    </script>
</head>
<body>
<form th:action="@{/user/regist}" method="post" id="form">
    <table align="center">
        <tr>
            <td class="td-left" ></td>
            <td>
                <h1 style="color: gold">欢迎注册</h1>
            </td>
        </tr>
        <tr>
            <td class="td-left" >用户名</td>
            <td>
                <input style="width: 200px;height: 30px" name="name" type="text" id="name" class="text"/>
            </td>
        </tr>
        <tr>
            <td class="td-left">输入密码</td>
            <td>
                <input style="width: 200px;height: 30px" type="password" name="password" id="password"/>
            </td>
        </tr>
        <tr>
            <td class="td-left">密码强度</td>
            <td  colspan="2" height="40px">
                <div id="passStrength"></div>
            </td>
        </tr>
        <tr>
            <td class="td-left">确认密码</td>
            <td>
                <input style="width: 200px;height: 30px" type="password" name="rpass" onblur="pass()" id="rpass" class="text"/>
            </td>
        </tr>
        <tr>
            <td class="td-left">姓名</td>
            <td>
                <input style="width: 200px;height: 30px" type="text" name="fullName" id="fullName" class="text"/>
            </td>
        </tr>
        <tr>
            <td class="td-left">邮箱</td>
            <td>
                <input style="width: 200px;height: 30px" type="email" name="email" onblur="emailReg()" id="email" class="text" th:placeholder="请输入邮箱"/>
                <input type="button" onclick="sendEmail()" value="获取验证码"/>
            </td>
        </tr>
        <tr>
            <td class="td-left">手机号</td>
            <td>
                <input style="width: 200px;height: 30px" type="text" name="tel" onblur="telphone()" id="tel" class="text"/>
            </td>
        </tr>
        <tr>
            <td class="td-left">住址</td>
            <td>
                <input style="width: 200px;height: 30px" type="text" name="address" id="address" class="text"/>
            </td>
        </tr>
        <tr>
            <td>密保问题</td>
            <td>
                <select id="problem" name="problem" style="width: 100px">
                    <option value="1" selected="selected">故乡地址</option>
                    <option value="2">家庭住址</option>
                    <option value="3">公司名称</option>
                    <option value="4">爱人姓氏</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>密保答案</td>
            <td>
                <input style="width: 200px;height: 30px" type="text" id="answer" name="answer" class="text"/>
            </td>
        </tr>
        <tr>
            <td>验证码</td>
            <td>
                <input style="width: 200px;height: 30px" type="text" id="inputCode" name="inputCode"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="30px"></td>
        </tr>
        <tr>
            <td align="right">
                <input type="button" onclick="regist()" value="提交" class="button"/>
            </td>
            <td>
                <input type="reset" value="重置" class="button"/>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    function sendEmail(){
        $.ajax({
            url:"http://localhost:8080/user/sendEmail",
            type: "GET",
            data:{"email":$("#email").val()}
        });
    }
    function pass() {
        var password = $("#password").val();
        var rpass = $("#rpass").val();
        if (password != rpass){
            alert("两次密码不一致！");
            $("#password").val("");
            document.getElementById("passStrength").innerHTML="";
            $("#rpass").val("");
        }
    }
    function emailReg() {
        var email = $("#email").val();
        var emailReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
        if(!emailReg.test(email)){
            alert("请输入正确的邮箱");
            $("#email").val("");
        }
    }
    function telphone() {
        var tel = $("#tel").val();
        var telReg = /^1[345789]\d{9}$/;
        if(!telReg.test(tel)){
            alert("请输入正确的手机号");
            $("#tel").val("");
        }
    }
    function regist() {
        var name = $("#name").val();
        var password = $("#password").val();
        var rpass = $("#rpass").val();
        var fullName = $("#fullName").val();
        var email = $("#email").val();
        var tel = $("#tel").val();
        var address = $("#address").val();
        var problem = $("#problem").val();
        var answer = $("#answer").val();
        var inputCode = $("#inputCode").val();
        if (name==""||password==""||rpass==""||fullName==""||email==""||tel==""||address==""||problem==""||answer==""||inputCode==""){
            alert("请将信息填写完整");
        } else {
            $.ajax({
                url: "http://localhost:8080/user/regist",
                type: "POST",
                data: {
                    "name": name,
                    "password": password,
                    "fullName": fullName,
                    "email": email,
                    "tel": tel,
                    "address": address,
                    "problem": problem,
                    "answer": answer,
                    "inputCode": inputCode
                },
                dataType: "json",
                success: function (data) {
                    if (data.code == "0"){
                        window.location.href="http://localhost:8080/toIndex";
                    }else if (data.code == "1"){
                        alert("验证码不正确");
                    }else {
                        alert("异常");
                    }
                }
            });
        }
    }
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<!-- Icons -->
<script type="text/javascript" th:src="@{/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" th:src="@{/js/Chart.min.js}"></script>
</body>
<script type="text/javascript">
    var dataList = ["0","1"];
    var options = {
        dataList: dataList,
        success:function(){
            console.log("show");
        },
        fail: function(){
            console.log("fail");
        }
    };
</script>
<script type="text/javascript">
    function PasswordStrength(passwordID,strengthID){
        this.init(strengthID);
        var _this = this;
        document.getElementById(passwordID).onkeyup=function(){
            _this.checkStrength(this.value);
        }
    };
    PasswordStrength.prototype.init = function(strengthID){
        var id = document.getElementById(strengthID);
        var div = document.createElement('div');
        var strong = document.createElement('strong');
        this.oStrength = id.appendChild(div);
        this.oStrengthTxt = id.parentNode.appendChild(strong);
    };
    PasswordStrength.prototype.checkStrength = function (val){
        var aLvTxt = ['','低','中','高'];
        var lv = 0;
        if(val.match(/[a-z]/g)){lv++;}
        if(val.match(/[0-9]/g)){lv++;}
        if(val.match(/(.[^a-z0-9])/g)){lv++;}
        if(val.length < 6){lv=0;}
        if(lv > 3){lv=3;}
        this.oStrength.className = 'strengthLv' + lv;
        this.oStrengthTxt.innerHTML = aLvTxt[lv];
    };
</script>
<script type="text/javascript">
    new PasswordStrength('password','passStrength');
</script>
</html>